<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../stylesheets/webElement.css" />
  <style>
    body {
      position: absolute;
      margin: 0;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      font-size: 14px;
      font-family: 'Microsoft YaHei';
    }

    /* 这里关于基本元素的样式 */
    #g_element {
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      right: 0;
      background: cyan;
      overflow: hidden;
    }
    #g_element > ul {
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 80px;
    }
    #g_element > ul > li {
      width: 7.1428%;
      float: left;
      box-sizing: border-box;
      text-align: center;
    }

    /* 这里关于树结构的样式 */
    #g_tree {
      position: absolute;
      left: 0;
      top: 80px;
      bottom: 80px;
      width: 150px;
      background: greenyellow;
      overflow: auto;
    }
    #g_tree ul {
      padding-left: 1em;
      list-style: none;
      line-height: 2em;
      margin: 0;
    }
    #g_tree ul > li {
      position: relative;
    }
    #g_tree span {
      float: right;
      padding-right: 10px;
      color:  gray;
    }

    /*
      根据i的data-active属性，而改变下面的ul是否可见
      以及i的表现形式
    */
    i {
      position: absolute;
      width: .6em;
      height: .6em;
      top: -1.8em;
      left: -1.3em;
      background: linear-gradient(45deg, transparent 50%, gray 50%);
      cursor: pointer;
      padding: .5em;
      background-clip: content-box;
    }
    i[data-active="true"] {
      transform: rotate(135deg);
    } 
    i[data-active="false"] {
      transform: rotate(45deg);
    }
    i[data-active="true"] + ul {
      display: block;
    }
    i[data-active="false"] + ul {
      display: none;
    }


    /* 这里关于属性设置框的样式 */
    #g_attribute {
      position: absolute;
      width: 300px;
      right: 0;
      top: 80px;
      bottom: 80px;
      background: #333;
      overflow: auto;
    }
    #g_attribute > div {
      margin-bottom: 20px;
    }
    #g_attribute > div> h2 {
      margin: 0;
      padding: 0;
      line-height: 2.5;
      text-align: center;
      font-size: 1.3em;
      color: white;
      border-bottom: 1px solid currentColor;
    }
    #g_attribute > div > ul {
      margin: 0;
      padding: 0;
      list-style: none;
      color: white;
      overflow: hidden;
    }
    #g_attribute > div > ul > li {
      float: left;
      padding: .5em;
      box-sizing: border-box;
      min-height: 40px;
      line-height: calc(40px - 1em);
    }
    #g_attribute > div > ul > li:nth-child(2n+1) {
      width: 30%;
    }
    #g_attribute > div > ul > li:nth-child(2n) {
      width: 70%;
    }
    #g_attribute > div > ul input, #g_attribute > div > ul textarea{
      display: block;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    #g_attribute > div > ul textarea {
      resize: vertical;
    }
    #g_attribute button {
      display: block;
      margin: 20px auto 0 auto;
      width: 80%;
      height: 40px;
    }


    /* 这里显示html的呈现 */
    #g_content {
      position: absolute;
      top: 80px;
      left: 150px;
      right: 300px;
      bottom: 80px;
      background: lightgray;
      overflow: auto;
    }
    #g_content > #g_viewport {
      position: absolute;
      margin: auto;
      display: block;
      background: white;
      left: 0;
      top: 80px;
      right: 0;
      resize: both;
      width: 320px;
      height: 480px;
      max-width: 100%!important;
      max-height: calc(100% - 40px);
      overflow: hidden;
      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    }
    #g_change {
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      margin: auto;
      width: 200px;
      height: 40px;
    }
    #g_change > input {
      box-sizing: border-box;
      width: 55px;
      height: 40px;
      padding: 0 .9em;
    }
    #g_change > button {
      width: 80px;
      box-sizing: border-box;
      height: 40px;
      vertical-align: middle;
    }

    /*普通元素拉进viewport时候，让可放置的元素高亮*/
    #g_body.enter div, #g_body.enter li, #g_body.enter label, #g_body.enter a, #g_body.enter span  {
      padding: 1em 0;
      background: green;
      border: 1px solid white;
    }
    #g_body.enter label {
      padding: 1em;
    }
    #g_body.enter a, #g_body.enter span {
      padding: 1em;
    }
    #g_body.input form {
      background: lawngreen;
      padding: 1em 0;
      border: 1px solid white;
    }
    #g_body.input div, #g_body.input label {
      padding: 1em 0;
      background: brown;
      border: 1px solid white;
    }
    #g_body.input label {
      padding: 1em;
    }
    /*这里放置组合元素，放在底端*/
    #g_combine {
      position: absolute;
      left: 0;
      right: 0;
      height: 80px;
      bottom: 0;
      background: gray;
      overflow: auto;
    }
    #g_combine > ul {
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 55px;
      display: inline-block;
      white-space: nowrap;
      overflow: auto;
    }
    #g_combine > ul > li {
      width: 80px;
      box-sizing: border-box;
      text-align: center;
      display: inline-block;
      cursor: grab;
    }

    /* 激活元素，让元素底色变成绿色，padding为1em 0*/
    .g_active {
      padding: 1em 0;
      background: green;
    }

    #g_body {
      width: 100%;
      height: 100%;
      overflow: auto;
    }

    /* 这里放置g_show元素的样式，当激活填充整个界面，演示窗口，取消，就收回去*/
    #g_show[data-active="true"] {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      background-color: hsla(100, 50%, 50%, 0.4);
    }
    img {
      max-width: 100%;
    }
    video {
      max-width: 100%;
    }
  </style>
</head>
<body>
    <div id="g_element">
      <ul>
        <li draggable="true" data-style="single" data-name="a">超链接</li>
        <li draggable="true" data-style="single" data-name="table">表格</li>
        <li draggable="true" data-style="single" data-name="ul">列表</li>
        <li draggable="true" data-style="single" data-name="img">图片</li>
        <li draggable="true" data-style="single" data-name="form">表单</li>
        <li draggable="true" data-style="single" data-name="input">输入框</li>
        <li draggable="true" data-style="single" data-name="label">标签框</li>
        <li draggable="true" data-style="single" data-name="textarea">多行输入框</li>
        <li draggable="true" data-style="single" data-name="select">选择框</li>
        <li draggable="true" data-style="single" data-name="div">块</li>
        <li draggable="true" data-style="single" data-name="span">通用文本</li>
        <li draggable="true" data-style="single" data-name="video">视频</li>
        <li draggable="true" data-style="single" data-name="audio">音频</li>
        <li draggable="true" data-style="single" data-name="canvas">绘图</li>
      </ul>
    </div>
    <div id="g_tree"></div>
    <div id="g_attribute"></div>
    <div id="g_content">
      <div id="g_change">
        <input type="text" id="g_width" value="320">
        <input type="text" id="g_height" value="480">
        <button id="g_click">改变大小</button>
      </div>
      <div id="g_viewport">
        <div id="g_body"></div>
      </div>
    </div>
    <div id="g_combine">
      <ul>
        <li draggable="true" data-style="multiple" data-name="div.container>div.h1+div.h2+div.h3+div.h4+div.h5+div.h6">h1-h6</li>
        <li draggable="true" data-style="multiple" data-name="div.container>div.h1>span+span.small<div.h2>span+span.small<div.h3>span+span.small<div.h4>span+span.small<div.h5>span+span.small<div.h6>span+span.small">次标题</li>
        <li draggable="true" data-style="multiple" data-name="div.blockquote>div.p">blockquote</li>
        <li draggable="true" data-style="multiple" data-name="div.blockquote>div.p+div.footer>span+span.cite">bq foot</li>
        <li draggable="true" data-style="multiple" data-name="ul>li+li+li+li>span+ul>li+li+li+li@li+li+li">ul</li>
        <li draggable="true" data-style="multiple" data-name="ul.dl>li.dt+li.dd+li.dd+li.dt+li.dd+li.dt+li.dd">dl</li>
        <li draggable="true" data-style="multiple" data-name="table.table>tr>th+th+th+th<tr>td+td+td+td<tr>td+td+td+td<tr>td+td+td+td">table</li>
        <li draggable="true" data-style="multiple" data-name="div>span.btn.btn-primary+span.btn.btn-secondary+span.btn.btn-success+span.btn.btn-info+span.btn.btn-warning+span.btn.btn-danger+span.btn.btn-link">普通按钮</li>
        <li draggable="true" data-style="multiple" data-name="div>span.btn.btn-primary-outline+span.btn.btn-secondary-outline+span.btn.btn-success-outline+span.btn.btn-info-outline+span.btn.btn-warning-outline+span.btn.btn-danger-outline">边框按钮</li>
        <li draggable="true" data-style="multiple" data-name="div>span.btn.btn-primary.btn-lg+span.btn.btn-secondary.btn-lg">大按钮</li>
        <li draggable="true" data-style="multiple" data-name="div>span.btn.btn-primary.btn-sm+span.btn.btn-secondary.btn-sm">小按钮</li>
        <li draggable="true" data-style="multiple" data-name="div>span.btn.btn-primary.btn-lg.btn-block+span.btn.btn-secondary.btn-lg.btn-block">块按钮</li>
        <li draggable="true" data-style="multiple" data-name="div>span.btn.btn-primary.btn-lg.active+span.btn.btn-secondary.btn-lg.active">激活按钮</li>
        <li draggable="true" data-style="multiple" data-name="div>span.btn.btn-primary.btn-lg.disabled+span.btn.btn-secondary.btn-lg.disabled">禁用按钮</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group>span.btn.btn-secondary+span.btn.btn-secondary+span.btn.btn-secondary">按钮组</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-toolbar>div.btn-group>span.btn.btn-secondary+span.btn.btn-secondary+span.btn.btn-secondary<div.btn-group>span.btn.btn-secondary+span.btn.btn-secondary+span.btn.btn-secondary">分区按钮组</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group.btn-group-lg>span.btn.btn-secondary+span.btn.btn-secondary+span.btn.btn-secondary">大按钮组</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group.btn-group-sm>span.btn.btn-secondary+span.btn.btn-secondary+span.btn.btn-secondary">小按钮组</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group-vertical>span.btn.btn-secondary+span.btn.btn-secondary+span.btn.btn-secondary">垂直按钮组</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group>span.btn.btn-primary.dropdown-toggle">下拉按钮</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group>span.btn.btn-danger+span.btn.btn-danger.dropdown-toggle">分割下拉按钮</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group>span.btn.btn-primary.btn-lg.dropdown-toggle">大下拉按钮</li>
        <li draggable="true" data-style="multiple" data-name="div.btn-group.dropup>span.btn.btn-danger+span.btn.btn-danger.dropdown-toggle">分割上升按钮</li>
        <li draggable="true" data-style="multiple" data-name="span.btn.btn-default.btn-lg>span.glyphicon.glyphicon-star+span">图标按钮</li>
        <li draggable="true" data-style="multiple" data-name="div.container>div.form-group>label+input.form-control<div.form-group>label+input.form-control<div.form-group>label+select.form-control>option+option+option+option@span.btn.btn-primary">基础表单</li>
        <li draggable="true" data-style="multiple" data-name="form.form-inline>div.form-group>input.form-control<div.form-group>div.input-group>div.input-group-addon+input.form-control@div.checkbox>label>input+span@span.btn.btn-primary">内联表单</li>
        <li draggable="true" data-style="multiple" data-name="form.form-horizontal>div.form-group>label.col-2.control-label+div.col-10>input.form-control@div.form-group>label.col-2.control-label+div.col-10>input.form-control@div.form-group>div.col-offset-2.col-10>span.btn.btn-primary">水平表单</li>
        <li draggable="true" data-style="multiple" data-name="div.input-group>span.input-group-addon+input.form-control+span.input-group-addon">附件控件</li>
        <li draggable="true" data-style="multiple" data-name="ul.nav.nav-tabs>li.active>a<li>a<li>a">标签页</li>
        <li draggable="true" data-style="multiple" data-name="div.navbar.navbar-default>div.container>div.navbar-header>a.navbar-brand>img">brand</li>
        <li draggable="true" data-style="multiple" data-name="div.navbar.navbar-default>form.navbar-form.navbar-left>div.form-group>input.form-control<span.btn.btn-default">标签表单</li>
        <li draggable="true" data-style="multiple" data-name="ul.breadcrumb>li>a<li>a<li">路径导航</li>
        <li draggable="true" data-style="multiple" data-name="div.nav>ul.pagination>li>a<li>a<li>a<li>a<li>a<li>a">多页索引</li>
        <li draggable="true" data-style="multiple" data-name="div.nav>ul.pager>li>a<li>a">翻页</li>
      </ul>
    </div>
    <div id="g_show" data-active="false"></div>
    <script type="text/javascript" src="../javascripts/webElement.js"></script>
    <script>
      var gElement = document.getElementById("g_element");
      var content = document.getElementById("g_content");
      var combine = document.getElementById("g_combine");
      var liArray = document.querySelectorAll('#g_element li, #g_combine li');
      var tree = document.getElementById("g_tree");
      var viewport = document.getElementById("g_body");
      var attribute = document.getElementById("g_attribute");
      var inputWidth = document.getElementById("g_width");
      var inputHeight = document.getElementById("g_height");
      var clickButton = document.getElementById("g_click");
      var show = document.getElementById("g_show");
      var activeWE = null;

      /*
        这里放置拖拽的行为方法
        1.从头顶上的基本元素开始，开始拖拽
        2.只有viewport元素可以放置元素
        3.禁掉所有关于浏览器的默认行为
        4.放置后，改变viewport上的表现并且改变右边树的结构
      */

      // 处理普通文本放置行为
      function dropCreate(target, text, textStr) {
        if (textStr == 'single') {
          var we = new WE(text);
          activeWE = we;
          if (target === viewport) {
            we.create(target);
          }
          else {
            var tempWe = ManageWE.getWeByElement(target);
            we.createByWe(tempWe);
          }
          attribute.innerHTML = we.displayPropertyHtml();
        }
        else if (textStr == 'multiple') {
          var objectArray = ShareObject.stringToObj(text);
          var firstWe;
          if (target === viewport) {
           firstWe = ShareObject.createWeArrayByElement(objectArray, viewport);
          }
          else {
            var tempWe = ManageWE.getWeByElement(target);
            firstWe = tempWe.createWeArray(objectArray);
            attribute.innerHTML = tempWe.displayPropertyHtml();
          }
          activeWE = firstWe;
        }

        tree.innerHTML = ManageWE.parseAllHTML();
      }

      /*
        处理文件放置行为
        fileList代表放置的文件组合，根据文件类型，下列的方式进行处理
        image: 创建一个nodaName为img的WE对象，并将该对象放置在activeWE对象下
        video: 创建一个nodeName为video的WE对象， 并将该对象放置在activeWE对象下
        audio: 创建一个nodeName为audio的WE对象， 并将该对象放置在activeWE对象下
        text: 读取改文本内容，根据四个空格分割，将文本内容放置activeWE对象下拥有拥有textContent的元素里
      */
      function dropFile(fileList) {
        if (!activeWE) {
          return false;
        }
        
        [].forEach.call(fileList, function (file) {
          var type = file.type;
          var reader = new FileReader();

          if (type.indexOf('image') > -1) {
            reader.readAsDataURL(file);
            reader.addEventListener('load', function () {
              var we = new WE('img');
              we.link = false;
              we.element.src = reader.result;
              we.createByWe(activeWE);
              tree.innerHTML = ManageWE.parseAllHTML();
            });
          }
          else if (type.indexOf('video') > -1) {
            reader.readAsDataURL(file);
            reader.addEventListener('load', function () {
              var we = new WE('video');
              we.link = false;
              we.element.src = reader.result;
              we.element.controls = true;
              we.createByWe(activeWE);
              tree.innerHTML = ManageWE.parseAllHTML();
            });
          }
          else if (type.indexOf('audio') > -1) {
            reader.readAsDataURL(file);
            reader.addEventListener('load', function () {
              var we = new WE('audio');
              we.link = false;
              we.element.src = reader.result;
              we.element.controls = true;
              we.createByWe(activeWE);
              tree.innerHTML = ManageWE.parseAllHTML();
            });
          }
          else if (type.indexOf('text') > -1) {
            reader.readAsText(file);
            reader.addEventListener('load', function() {
              var readerText = reader.result;
              var textArray = readerText.split(/(\s){4}/g);

              // 去除都是空格的元素
              var newTextArray = textArray.filter(function (text) {
                var pattern = /^\s+$/;
                if (pattern.test(text)) {
                  return false;
                }
                return true;
              });

              var contentWeArray = ManageWE.getContentArray(activeWE);
              for (var i = 0, len = contentWeArray.length; i < len; i++) {
                contentWeArray[i].element.textContent = newTextArray[i].trim();
              }
            })
          }

        });
      }

      // 填充show里面的数据
      function insertText() {
        var elementArray = [];
        // var filter = {
        //   acceptNode: function (node) {
        //     var nodeName = node.nodeName;
        //     var isContentElement = (nodeName == 'a') || (nodeName == 'th') || (nodeName == 'td')  || (nodeName == 'li')  || (nodeName == 'label') ||
        //         (nodeName == 'option') || (nodeName == 'div') || (nodeName == 'span');
        //     return isContentElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
        //   }
        // };
        // var iterator = document.createNodeIterator(show, NodeFilter.SHOW_ELEMENT, filter, false);

        // var node = iterator.nextNode();
        // while (node !== null) {
        //   if (node.childNodes.length === 0) {
        //     elementArray.push(node);
        //   }
          
        //   node = iterator.nextNode;
        // }
        var elementList = show.querySelectorAll('*');
        for (var i = 0, len = elementList.length; i < len; i++) {
          if (ShareObject.hasTextContent(elementList[i]) && elementList[i].childNodes.length === 0) {
            elementList[i].textContent = "21312312321323";
          }
        }

        console.log(elementList.length);
        console.log(elementArray);
      }

      // 开始拖拽的事件行为
      function dragStartHandler(ev) {
        ev.effectAllowed = "copy";
        ev.dataTransfer.setData("text/plain", ev.target.dataset.name);
        ev.dataTransfer.setData("text/html", ev.target.dataset.style);
        var text = ev.target.dataset.name;
        if (text === 'input' || text === 'textarea' || text === 'select') {
          viewport.classList.add('input');
        }
        else {
          viewport.classList.add('enter');
        }
        return true;
      }

      // 当拖拽到目标元素触发的行为
      function dragEnterHandler(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        return false;
      }

      //  拖拽在目标元素上面触发的行为,表示允许放置上面
      function canDragOverHandler(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        ev.dataTransfer.dropEffect = 'copy';
        return false;
      }

      // 拖拽在目标元素上面触发的行为,表示不允许放置上面
      function cantDragOverHandler(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        ev.dataTransfer.dropEffect = 'none';
        return false;
      }

      //  在拖拽元素上离开发生的行为
      function dragLeaveHandler(evt) {
        return false;
      }

      //  拖拽行为结束后触发的行为
      function dragEndHandler(ev) {
        viewport.className = '';
        return false;
      }

      //  放置元素的后的行为
      function dropHandler(ev) {
        ev.dataTransfer.dropEffect = 'copy';
        ev.preventDefault();
        ev.stopPropagation();

        var target = ev.target;
        var text = ev.dataTransfer.getData("text/plain");
        var textStr = ev.dataTransfer.getData("text/html");
        var fileList = ev.dataTransfer.files;
        
        // 如果拖动拥有文件，进入文件操作函数
        // 如果拖动没有文件函数，直接分析字符串

        if (fileList.length > 0) {
          dropFile(fileList);
        }
        else {
          dropCreate(target, text, textStr);
        }
        
      }

      //  不能放置元素的放置后的行为
      function cantDropHandler(ev) {
        ev.dataTransfer.dropEffect = 'none';
        ev.preventDefault();
        ev.stopPropagation();
      }

      /*
        tree上面的逻辑处理
        1.点击上面的元素，在viewport上的元素显示出来
        2.在attribute容器中可以改变的样式的属性
        3.点击右边的x可以删掉元素，包括它的子元素
      */

      // 点击元素，在viewport上的元素显示，并且在attribute显示这个元素的属性
      var clickLiHandler = function () {
        var activeElement = null;
        return function (ev) {
          var target = ev.target;
          var spanArray = tree.querySelectorAll("span");
          var i;

          if (target.nodeName.toLowerCase() === 'li') {

            i = Number(target.dataset.content);
            var we = ManageWE[i];
            activeWE = we;
            var element = we.element;
            
            // 让该元素出现在viewport内显示出来
            element.scrollIntoView();

            // 移除上次激活的元素
            if (activeElement !== null) {
              activeElement.classList.remove('g_active');
            }
            element.classList.add('g_active');

            // 记录激活的元素
            activeElement = we.element;

            attribute.innerHTML = we.displayPropertyHtml();
          }
          // 如果点击的是span元素，找到span的位置，删除span对应的we以及下面的元素
          else if (target.nodeName.toLowerCase() === 'span') {

            i = target.parentNode.dataset.content;

            //  更新content上的呈现
            if (ManageWE[i].parent) {
              ManageWE[i].remove(ManageWE[i].parent.element);
            }
            else {
              ManageWE[i].remove(viewport);
            }

            // 更新tree上的呈现
            tree.innerHTML = ManageWE.parseAllHTML();

            // 更新attribute的呈现，设置为空
            attribute.innerHTML = '';
            activeWE = null;
          }
          else if (target.nodeName.toLowerCase() === 'i') {
            var active = target.dataset.active;
            if (active == 'false') {
              target.dataset.active = 'true';
            }
            else {
              target.dataset.active = 'false';
            }
          }
        }
      }

      /*
        关于attribute的提取和附加
      */

      function attribButtonClick(ev) {
        var target = ev.target;
        if (target.nodeName.toLowerCase() == 'button') {
          if (target.dataset.change == 'base') {
            var obj = ShareObject.getInputObject(attribute.children[0]);
            activeWE.attachBaseProperty(obj);
          } 
          else if (target.dataset.change == 'layout') {
            var obj = ShareObject.getInputObject(attribute.children[1]);
            activeWE.attachLayoutProperty(obj);
          }
          tree.innerHTML = ManageWE.parseAllHTML();
        }
      }

      /*
        这是改变viewport大小的事件行为
      */
      function resizeHandler(ev) {
        var width = Number(inputWidth.value);
        var height = Number(inputHeight.value);

        document.querySelector('#g_viewport').style.cssText = "width: " + width+ "px; height: " + height + "px";
      }

      /**
       * 这里为点击组合元素的的行为的函数
       * 1.确定这个元素是不是li元素，如果是，取到li元素里面的data-name字符串，解析成dom对象
       * 2.弹出演示窗，然后把dom对象放置演示窗
       * 3.填充演示文本
      */
      function clickCombineHandler(ev) {
        var target = ev.target;
        if (target.nodeName.toLowerCase() === 'li') {
          // 测试
          var objectArray = ShareObject.stringToObj(target.dataset.name);
          var tempFragment = ShareObject.createElementByArray(objectArray);
          show.dataset.active = 'true';
          show.appendChild(tempFragment);
          insertText();
        }
      }

      /*
        以下是关于拖拽的事件绑定
      */
      Array.prototype.forEach.call(liArray, function (li) {
        li.addEventListener('dragstart', dragStartHandler, false);
        li.addEventListener('dragend', dragEndHandler, false);
      });

      [tree, viewport, attribute].forEach(function (element) {
        element.addEventListener('dragEnter', dragEnterHandler, false);
        element.addEventListener('dragleave', dragLeaveHandler, false);
      });

      viewport.addEventListener("dragover", canDragOverHandler, false);
      viewport.addEventListener('drop', dropHandler, false);


      [tree, attribute, gElement, content].forEach(function (element) {
        element.addEventListener('dragover', cantDragOverHandler, false);
        element.addEventListener('drop', cantDropHandler, false);
      });

      /*
        以下关于下面tree上面的事件绑定
      */
      tree.addEventListener('click', clickLiHandler(), false);

      /*
        关于attribute上面的事件绑定
      */
      attribute.addEventListener('click', attribButtonClick, false);

      /*
        关于改变viewport大小的事件绑定
      */
      clickButton.addEventListener('click', resizeHandler, false);

      /**
       * 绑定combine事件
      */
      //combine.addEventListener('click', clickCombineHandler, false);
    </script>
</body>
</html>